<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>thacher update</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/css/layui.css}" media="all">
    <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-container">
    <form class="layui-form" id="student-scores-form">
        <div class="layui-form-item">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="id" id="id" autocomplete="off" lay-verify="id"
                           class="layui-input layui-hide">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出勤</label>
                <div class="layui-input-inline">
                    <input type="text" name="attendance" id="attendance" autocomplete="off" lay-verify="attendance"
                           placeholder="请输入占比"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">课堂表现</label>
                <div class="layui-input-inline">
                    <input type="text" name="classPerformance" id="classPerformance" autocomplete="off"
                           lay-verify="classPerformance"
                           placeholder="请输入占比"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">作业</label>
                <div class="layui-input-inline">
                    <input type="text" name="task" id="task" autocomplete="off" lay-verify="task"
                           placeholder="请输入占比"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">实验</label>
                <div class="layui-input-inline">
                    <input type="text" name="experiment" id="experiment" autocomplete="off" lay-verify="experiment"
                           placeholder="请输入占比"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">考试</label>
                <div class="layui-input-inline">
                    <input type="text" name="exam" id="exam" autocomplete="off" lay-verify="exam"
                           placeholder="请输入占比"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="version" id="version" autocomplete="off" lay-verify="version"
                           class="layui-input layui-hide">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="demo" id="sub-btn">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
<script th:src="@{/layui.js}" src="layui.js" charset="utf-8"></script>
<script>
    var request = 'http://localhost:8080/'
    layui.use('form', function () {
        var form = layui.form;
        $(function () {
            $.ajax({
                url: request + '/teacher/student/score/' + sessionStorage.getItem('Id'),
                type: 'GET',
                dataType: "JSON",
                success: function (res) {
                    if (res.code === 0) {
                        let score = res.data;
                        $("#id").val(score.id);
                        $("#attendance").val(score.attendance);
                        $("#classPerformance").val(score.classPerformance);
                        $("#task").val(score.task);
                        $("#experiment").val(score.experiment);
                        $("#exam").val(score.exam);
                        $("#version").val(score.version);
                        form.render();
                    }
                }
            })
        })

        // 自定义验证规则
        form.verify({
            id: function (value) {
                if (value.length < 1) {
                    return 'id不可改！';
                }
            },
            attendance: [
                /[0-9]/
                , "占比必须为 0~1！"
            ],
            classPerformance: [
                /[0-9]/
                , "占比必须为 0~1！"
            ],
            task: [
                /[0-9]/
                , "占比必须为 0~1！"
            ],
            experiment: [
                /[0-9]/
                , "占比必须为 0~1！"
            ],
            exam: [
                /[0-9]/
                , "占比必须为 0~1！"
            ],
        });
        // 监听提交
        form.on('submit(demo)', function () {
            // submit 提交事件
            let serialize = $("#student-scores-form").serialize();
            let id = sessionStorage.getItem('Id');
            let studentId = sessionStorage.getItem('studentId');
            let courseId = sessionStorage.getItem('courseId');
            serialize = 'id=' + id + '&courseId=' + courseId + '&studentId=' + studentId + '&' + serialize
            $.ajax({
                url: '/teacher/student/course/update/',
                type: "PUT",
                data: serialize,
                dataType: "JSON",
                success: function (JSONResult) {
                    if (JSONResult.code === 0) {
                        layer.msg("修改成功！");
                    } else {
                        layer.msg("修改失败！");
                    }
                }
            });
            return false;
        });
    })
</script>
</html>